<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>交易记录</title>
    <!--dynamic table-->
    <link href="/js/advanced-datatable/css/demo_page.css" rel="stylesheet"/>
    <link href="/js/advanced-datatable/css/demo_table.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/js/data-tables/DT_bootstrap.css"/>

    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/style-responsive.css" rel="stylesheet">
</head>

<body class="sticky-header">

<section>
  <!-- left side start-->
  <div class="left-side sticky-left-side">

    <!--logo and iconic logo start-->
    <div class="logo">
      <a th:href="@{/index}"><img src="/images/logo.png"></a>
    </div>

    <div class="logo-icon text-center">
      <a th:href="@{/index}"><img src="/images/logo_icon.png"></a>
    </div>
    <!--logo and iconic logo end-->

    <div class="left-side-inner">

      <!-- visible to small devices only -->
      <div class="visible-xs hidden-sm hidden-md hidden-lg">
        <div class="media logged-user">
          <img alt="" src="/images/photos/user-avatar.png" class="media-object">
          <div class="media-body">
            <h4><a href="#">John Doe</a></h4>
            <span>"Hello There..."</span>
          </div>
        </div>

        <h5 class="left-nav-title">用户信息</h5>
        <ul class="nav nav-pills nav-stacked custom-nav">
          <li><a href="#"><i class="fa fa-user"></i>  Profile</a></li>
          <li><a href="#"><i class="fa fa-cog"></i>  Settings</a></li>
          <li><a href="#"><i class="fa fa-sign-out"></i> Log Out</a></li>
        </ul>
      </div>

      <!--sidebar nav start-->
      <ul class="nav nav-pills nav-stacked custom-nav">
        <li class="menu-list nav-active"><a href=""><i class="fa fa-home"></i> <span>储蓄卡</span></a>
          <ul class="sub-menu-list">
            <li><a th:href="@{/jumpDeposit}"><i class="fa fa-sign-in"></i> <span>存款</span></a></li>
            <li><a th:href="@{/jumpWithdrawals}"><i class="fa fa-laptop"></i> <span>取款</span></a></li>
            <li><a th:href="@{/findOtherById}"><i class="fa fa-envelope"></i> <span>转账</span></a></li>
            <li><a th:href="@{/findInformation}"><i class="fa fa-envelope"></i> <span>查看交易明细</span></a></li>
            <li><a th:href="@{/jumpLogin}"><i class="fa fa-sign-in"></i> <span>退出</span></a></li>
          </ul>
        </li>
        <li class="menu-list nav-active"><a href=""><i class="fa fa-home"></i> <span>信用卡</span></a>
          <ul class="sub-menu-list">
            <li><a th:href="@{/jumpDepositCredit}"><i class="fa fa-sign-in"></i> <span>存款</span></a></li>
            <li><a th:href="@{/jumpWithdrawalsCredit}"><i class="fa fa-laptop"></i> <span>取款</span></a></li>
            <li><a th:href="@{/findInformationCredit}"><i class="fa fa-envelope"></i> <span>查看交易明细</span></a></li>
            <li><a th:href="@{/jumpLogin}"><i class="fa fa-sign-in"></i> <span>退出</span></a></li>
          </ul>
        </li>

      </ul>
      <!--sidebar nav end-->

    </div>
  </div>
  <!-- left side end-->

  <!-- main content start-->
  <div class="main-content" >

    <!-- header section start-->
    <div class="header-section">

      <!--toggle button start-->
      <a class="toggle-btn"><i class="fa fa-bars"></i></a>
      <!--toggle button end-->

      <!--notification menu start -->
      <div class="menu-right">
        <ul class="notification-menu">
          <li>
            <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <img src="/images/photos/lqx.png"/>
              [[${session.loginUser.username}]]
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
              <li><a th:href="@{/jumpForget}"><i class="fa fa-cog"></i>修改密码</a></li>
              <li><a th:href="@{/jumpLogin}"><i class="fa fa-sign-out"></i>退出</a></li>
              <li><a th:href="@{/cancellation}"><i class="fa fa-sign-out"></i>注销</a></li>
            </ul>
          </li>

        </ul>
      </div>
      <!--notification menu end -->

    </div>
    <!-- header section end-->

    <!--body wrapper start-->
    <div class="wrapper">
      <div class="row">
        <div class="col-sm-12">
          <section class="panel">
            <header class="panel-heading">
              交易记录
            </header>
            <div class="panel-body">
              <div class="adv-table">
                <table class="display table table-bordered table-striped" id="dynamic-table">
                  <thead>
                  <tr>
                    <th>用户id</th>
                    <th>账户余额</th>
                    <th>交易明细</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr th:each="accountInf : ${session.savingsdepositcardinfList}">
                    <td th:text="${accountInf.id}"></td>
                    <td th:text="${accountInf.money}"></td>
                    <td th:text="${accountInf.information}"></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
    <!--body wrapper end-->

  </div>
  <!-- main content end-->
</section>
<!-- Placed js at the end of the document so the pages load faster -->
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/js/jquery-migrate-1.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.nicescroll.js"></script>

<!--dynamic table-->
<script type="text/javascript" language="javascript" src="/js/advanced-datatable/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/js/data-tables/DT_bootstrap.js"></script>
<!--dynamic table initialization -->
<script src="/js/dynamic_table_init.js"></script>

<!--common scripts for all pages-->
<script src="/js/scripts.js"></script>


</body>
</html>
